<html>
    <head>
        <title>Reporte de contratados</title>
        <!--[if IE]>
        <script type="text/javascript" src="<?php echo base_url() . "3rdparty/svg.js" ?>"  data-path="<?php echo base_url() . "3rdparty/" ?>"></script>
        <![endif]-->
        <meta name="svg.render.forceflash" content="true">
        <script type="text/javascript" src="<?php echo base_url() . "js/protovis-d3.3.js" ?>" ></script>
        <?php $this->load->view('head'); ?>
        <script type="text/javascript">
            $(document).ready(function(){
<?php if(!isset($admin)) $this->load->view('enReady'); ?>
    }); //fin $(document).ready(function(){
        </script>
    </head>
    <body style="text-align: left">
        <table>
            <tr style="  ">
                <?php 
                foreach($nombres as $ind => $val){
                    $tmp = trim($coloresArray[$ind]);
                    $tmp = trim($tmp,"'");
                    echo "<td style=\"background-color: $tmp;width: 12px;\"></td>";
                    echo "<td >$val</td>";
                }
                ?>
            </tr>
        </table>
        <script type="text/javascript+protovis">
            var data = <?php echo $datos; ?>;
            var n = 5,
            m = <?php echo $columnas; ?>,
            w = 600,
            h = 85 * m,
            x = pv.Scale.linear(0, <?php echo $maxNumero; ?>).range(0, w),
            y = pv.Scale.ordinal(pv.range(n)).splitBanded(0, h, 4/5);
            var rangos = <?php echo json_encode($rangos); ?>;
            var coloresV = <?php echo json_encode($coloresArray); ?>;
            var vis = new pv.Panel()
            .width(w)
            .height(h)
            .bottom(20)
            .left(80)
            .right(30)
            .top(5);

            var bar = vis.add(pv.Panel)
            .data(data)
            .top(function() y(this.index) )
            .add(pv.Bar)
            .data(function(a) a)
            .top(function() this.index * y.range().band / m)
            .height(y.range().band / m)
            .left(0)
            .width(x)
            .fillStyle(function() coloresV[this.index]);

            bar.anchor("buttom").add(pv.Label)
            .textStyle("black")
            .text(function(d) d.toFixed(1));

            vis.add(pv.Label)
            .data(pv.range(n))
            .left(0)
            .top(function() y(this.index) + y.range().band / 2)
            .textMargin(5)
            .textAlign("right")
            .text(function() rangos[this.index]);

            vis.add(pv.Rule)
            .data(x.ticks())
            .left(x)
            .strokeStyle(function(d) d ? "rgba(255,255,255,.3)" : "#000")
            .add(pv.Rule)
            .bottom(-8)
            .height(5)
            .strokeStyle("#000")
            .anchor("bottom").add(pv.Label)
            .text(function(d) d.toFixed(1));
            vis.render();
        </script>
    </body>
</html>
